<script setup lang="ts">
import { useMenuStore } from '@/pinia//useMenuStore';

const { proxy } = <any>getCurrentInstance();

const headerRef = ref<HTMLDivElement | null>(null);
const adminContainerRef = ref<HTMLDivElement | null>(null);

const MenuStore = useMenuStore();
const { isCollapse, needKeepAlive } = storeToRefs(MenuStore);

const clickMask = () => {
  MenuStore.setCollapse();
};

nextTick(() => {
  adminContainerRef.value?.setAttribute('style', `height: calc(100vh - ${headerRef.value?.offsetHeight}px)`);
});
onMounted(() => {
  proxy.$emitter.emit('headerOffsetHeight', `height: calc(100vh - ${headerRef.value?.offsetHeight}px)`);
});
</script>

<template>
  <div class="admin w-screen min-h-screen flex relative">
    <!-- 左侧菜单 -->
    <div
      class="admin-menu bg-gray-700 py-5 md:duration-150"
      :class="isCollapse ? 'md:!w-16' : 'md:!w-52'"
      v-bind:class="isCollapse ? '_translateX' : 'translateX'"
    >
      <router-link to="/">
        <div class="flex justify-center items-center text-3xl text-gray-200 mb-3">
          <img src="@/assets/logo.png" class="w-8 h-8 object-cover" />
          <span :class="isCollapse ? 'hidden ml-0' : 'block ml-3'">首页</span>
        </div>
      </router-link>

      <LayoutsAdminMenu />
    </div>

    <!-- 右侧 -->
    <div class="flex-1">
      <div ref="headerRef">
        <LayoutsAdminHeader />
        <!-- 历史菜单 -->
        <LayoutsAdminHistoryMenu />
      </div>
      <!-- 右侧主题内容 -->
      <div class="admin-container bg-gray-100" ref="adminContainerRef">
        <el-scrollbar>
          <router-view v-slot="{ Component, route }">
            <transition name="pageChange" mode="out-in">
              <KeepAlive :include="needKeepAlive">
                <component :is="Component" :key="route.path" />
              </KeepAlive>
            </transition>
          </router-view>
        </el-scrollbar>
      </div>
    </div>

    <!-- 遮罩 -->
    <div
      class="md:hidden w-screen h-screen bg-gray-800 opacity-50 absolute left-0 top-0 z-40"
      :class="isCollapse ? 'hidden' : 'block'"
      @click="clickMask"
    ></div>
  </div>
</template>

<style lang="scss" scoped></style>
